<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=720, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title></title>
<link href="css/style02.css" rel="stylesheet" />
<link href="css/base.css" rel="stylesheet" />
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"  type="text/javascript"></script>
<script src="http://h5.cailianxinwen.com/wxjson/js/wxapi-video.js?v=1.01"  type="text/javascript"></script>
<style>
	#listbox3{
    width: 100%;
    height: 97px;
    position: fixed;
    bottom: 97px;
    background-color: #6db317;
    font-size: 30px;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0 10px;
	justify-content: space-between;
}
.mask{
		position:fixed;
		top:0;
		left:0;
		bottom:0;
		right:0;
		background:rgba(0,0,0,0.7); /*一般遮罩随便设置一个颜色*/
		z-index: 100;

		display: flex;
		align-items: center;
		justify-content: center;
	}
	.alert{
		border: 1px solid #fff;
		border-radius: 20px;
		width: 400px;
		height: 300px;
		background-color: #6db317;
		z-index: 101;
		font-size: 30px;
		color: #fff;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
</style>

<style>
	input {
		outline-color: invert;  
		outline-style: none;   
		outline-width: 0px;   
		border: none;
		border-style: none;
		text-shadow: none;
		-webkit-appearance: none; 
		-webkit-user-select: text;
		outline-color: transparent; 
		box-shadow: none;
	  }

	.inputbox{
		width: 405px;
		height: 48px;
		margin: 40px auto 0;
		
	}
	.inputbox .search_input{
		width: 337px;
		height: 48px;
		border-top-left-radius: 24px;
		border-bottom-left-radius: 24px;
		border-top: solid 2px #6db317;
		border-left: solid 2px #6db317;
		border-bottom: solid 2px #6db317;
		border-right: 0;
		line-height: 48px;
		background: #fff;
		padding: 0 20px;
		font-size:24px;
		float: left;
	}
	.inputbox a{
		display: block;
		float: left;
		width: 52px;
		height: 48px;
		background: #6db317;
		text-align: center;
		line-height: 48px;
		color: #fff;
		font-size: 28px;
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
	}
	
	</style>
</head>
<body>
	<div class="mask" style="display: none;">
		<div class="alert">
			<span id="alertmsg">错误</span>
			<div id="close" style="border: 2px solid #fff;width:140px;text-align:center;padding:10px 20px;margin-top:70px;border-radius: 20px;">关闭</div>
		</div>
	</div>
<div class="wrap">
	<img src="img/bg02.png" id="top" style="height: 100%;position: absolute;">
	<div class="conbox" style="position: relative;padding: 100px 0 0 0">
		<div style="display: flex;justify-content: center;flex-direction: column;margin-top: 136px;">
			<img src="img/top.png" style="	display: block;margin:0 auto 36px;">

		</div>

	    <div class="con01" style="display: flex;align-items: center;justify-content: center;">
	    	<ul>
	    		<li class="org" id="cnum">00</li>
	    		<li class="org" id="num">00000</li>
	    		<li class="org" id="devnum">00000</li>
	    		<li>参与产品</li>
	    		<li>累计打卡数</li>
	    		<li>累计访问</li>
	    	</ul>
	    	 <div class="clear"></div>

	    </div>
	    <img src="img/img_title02.png" class="img_title02">
	    <div class="con02">

	    	<ul class="listbox" style="color: #fff;">

					<li id="starttime">开始时间：2024年5月6日9时</li>
				<li id="endtime">结束时间：2024年6月30日16时</li>
				<li><img src="img/li.png">&nbsp;&nbsp;&nbsp;&nbsp;活动规则：下载彩练新闻客户端，参与活动严禁刷票,一经发现取消参赛资格。</li>
	    	</ul>
	    </div>

		<div class="inputbox" >
	    	<input class="search_input" type="text" placeholder="请输入关键字">
	    <a  class="btn_input" id="btn">搜</a>	
	    </div>

	    <ul class="listbox2" style="position: absolute;background-color: #fff;">

	    	
	    </ul>


    </div>
	<div id="listbox3" style="display: none;">
		<span></span>
		<img src="img/btn_tp.png" id="btnvote"> 
	</div>
    <ul class="tab">
    	<!--<a href="list.html"><li><img src="img/tab01.jpg"></li></a>-->
		<a href="list.html"><li><img src="img/tab01.png"></li></a>
    	<a href="order.html"><li><img src="img/tab02.png"></li></a>
    	<!--<a href="list2.html"><li><img src="img/tab02-1.jpg"></li></a>-->
    	<div class="clear"></div>
    </ul>

</div>

</body>
<script>
/*
活动说明：参赛短视频作品按投稿时间先后顺序，陆续在彩练新闻APP展示,并同时进行网络投票。 开始时间：2024年5月6日9时 
	(function () {
        var wxUserInfo = localStorage.getItem("jlrbUserInfo");
        var href = location.href;
        if(!wxUserInfo){
            if(href.indexOf("code=") === -1){ //如果没有code参数就直接调用授权函数
                get_weixin_code_login();//调用授权函数
            }else{ //如果有拿取code值
                getUrlCode();
                var local = window.location.href;
                this.code = this.getUrlCode().code;
         
               if (this.code == null || this.code == '' || this.code == 'undefined') {
                   window.location.href = url;
               }
             getWxUserInfo(this.code);
           }
        }
        
    })();
*/

	function get_weixin_code_login() {

        var uri = window.location.href;
        var appid = 'wx77d980df3722c42a';//自己公众号的appid
        var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
            encodeURIComponent(uri) + '&response_type=code&scope=snsapi_userinfo&state=54322321#wechat_redirect';
        window.location.href = url;
  
        // 这里走完就是已经授权了。如果授权了就会url中带有code
    }
    
    //获取url参数
    function getUrlCode() {
        var url = location.search;
        this.winUrl = url;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    
    /**
   42  * 授权后获取用户的基本信息
   43  */
    function getWxUserInfo(coDe) {

        $.ajax({
           type: "post",
           url: 'https://www.cailianxinwen.com/app/vote/getOpenid?code='+coDe,
            dataType: "json",
            //jsonp: "jsoncallback",
            success: function (json) {
                console.log(json)
                localStorage.setItem('jlrbUserInfo',JSON.stringify(json));
            },
            error: function (err) {
                console.log(err)
            }
        });
    };
</script>
<script>

	//$("h2:contains('上')").parent().parent().html()
	//  var c=  		$("h2:contains('上')").length
	//  console.log(c)
	    	
var count=0
var id=0
var voteid=''   
var s=''
var e='' 	
var datas=''
var status=0	    		
	    
	getvotelist()
	function getvotelist()
    {
        $.ajax({
            type: "post",
            url: 'https://www.cailianxinwen.com/app/vote/getVoteItemListASC?voteId=503',
             dataType: "json",
             //jsonp: "jsoncallback",
             success: function (json) {
                 console.log(json)
		datas=json['items']
                var _html='';
				var num=0
				$('#devnum').text(json['devnum'])
                for(var i=0;i<json['items'].length;i++)
                {
					_html+='<li class="float_left">'
					_html+='<a href="listshow.html?id='+json['items'][i].id+'&votenum='+json['items'][i].votenum+'&pnum='+json['items'][i].num+'&userid=&num='+json['items'][i].votenum+'">'
					_html+='<div class="img_box">'
			
					_html+='<img src="'+json['items'][i].itemimg+'" class="list_img">'
				    _html+='</div></a>'

					_html+='<h2>'+json['items'][i].itemcon+'</h2>'
					_html+='<h3><img src="img/img_name.png"/>'+json['items'][i].businessname+'</h3>'
					_html+='<h4>'+json['items'][i].votenum+'卡</h4>'
					_html+='<a href="#" class="btn_xz" id="'+json['items'][i].id+'"><img src="img/btn_xz.png"></a>'
					_html+='	</li>'

					num+=parseInt(json['items'][i].votenum)
                }
				
			
					_html+='<li style="float:left;height: 160px;border:0;width:680px">'
						_html+='	</li>'
				

		
                $('.listbox2').html(_html)
				$('#num').text(num)
				$('#cnum').text(json['items'].length)
				$('#starttime').html('<img src="img/li.png">&nbsp;&nbsp;&nbsp;&nbsp;开始时间：'+json.starttime)
				$('#endtime').html('<img src="img/li.png">&nbsp;&nbsp;&nbsp;&nbsp;结束时间：'+json.endtime)
				s=json.starttime
				e=json.endtime
				status=1
             },
             error: function (err) {
                 console.log(err.statusText)
                 if(err.statusText=='error')
                 {                   
                    alert('链接超时')
                 }
             }
         });
    }

	$(document).on('click', '.btn_xz', function(e) {
	if($(this).children('img').attr('src')=='img/btn_xz2.png'){
		$(this).children('img').attr('src','img/btn_xz.png')
		count--
		if(count==0)
		{
			$('#listbox3').hide()
			voteid=''
		}
		voteid=voteid.replace(','+$(this).attr('id'),'')
		console.log(voteid)
		$('#listbox3 span').html('您已选择'+count+'项')
	}
	else{

		$(this).children('img').attr('src','img/btn_xz2.png')
		count++
		if(count>0)
		{
			$('#listbox3').show()
		}
		voteid+=','+$(this).attr('id')
		console.log(voteid)
		$('#listbox3 span').html('您已选择'+count+'项')
	}
});

$('#btnvote').click(function(){


	var time=checktime(s,e)
	console.log(time)

	if(time){
		temp=voteid.substring(1,voteid.length)
	var arr=temp.split(',')
	console.log(arr.length)

	if(arr.length>10)
	{
		$('.mask').show()
		$('#alertmsg').text('最多选择10项')
	
	}
	else{
		console.log(localStorage.getItem('jlrbUserInfo'))
		if(localStorage.getItem('jlrbUserInfo')==null)
		{
			window.location.href='index1.html'
		}
		else{
			govote(temp)
		}
		
	}	
	}
})

function checktime(a,b){
	var date1 = Date.parse(new Date(a));
	var date2 = Date.parse(new Date(b));
	var timestamp = Date.parse(new Date());
	var r=true
	if(timestamp<date1)
	{
		$('.mask').show()
		$('#alertmsg').text('活动尚未开始')
		r= false
	}
	if(timestamp>date2)
	{
		$('.mask').show()
		$('#alertmsg').text('活动已结束')
		r= false
	}
return r

}
$('#close').click(function(){
	$('.mask').hide()
	location.reload()
})
function govote(ids) {
	console.log(ids)
$.ajax({
	   type: "post",
	   url: 'https://www.cailianxinwen.com/app/vote/performVote?openid='+JSON.parse(localStorage.getItem('jlrbUserInfo')).openid+'&token='+JSON.parse(localStorage.getItem('jlrbUserInfo')).token+'&voteId=503&itemids='+temp,
		dataType: "json",
		//jsonp: "jsoncallback",
		success: function (json) {
			console.log('xxxxxxxx',json)
			$('.mask').show()
			switch(json)
			{
				case 0:
				$('.mask').show()
					$('#alertmsg').text('投票失败<0>')
				break;
				case 1:
				$('.mask').show()
				$('#alertmsg').text('投票成功')
			break;
				break;
		
				case 2:
				$('.mask').show()
				$('#alertmsg').text('今日已投票')
				break;
				
				case 3:
				$('.mask').show()
					$('#alertmsg').text('投票失败<3>')
				break;
				
				case 4:
				$('.mask').show()
				$('#alertmsg').text('请至少选择4项')
				break;
			}

		},
		error: function (err) {
			console.log(err)
		}
	});
};
$('.btn_input').click(function(){
	if(status==1)
	{
		var arr=[]
		for(let key in datas){
                 
			arr.push(datas[key]);
			
			}
		console.log(arr)
		var temp=$('.search_input').val()
		console.log(temp)
		var getlist1 = arr.filter(
			(item)=>item.businessname.includes(temp)//qstring就是你搜索的关键字
		);
		var getlist = arr.filter(
			(item)=>item.itemcon.includes(temp)//qstring就是你搜索的关键字
		);
		getlist=getlist1.concat(getlist)
		console.log(getlist)
		_html=''
		for(var i=0;i<getlist.length;i++)
		{
			_html+='<li class="float_left">'
			_html+='<a href="listshow.html?id='+getlist[i].id+'&votenum='+getlist[i].votenum+'&pnum='+getlist[i].num+'&userid=&num='+getlist[i].votenum+'">'
			_html+='<div class="img_box">'
	
			_html+='<img src="'+getlist[i].itemimg+'" class="list_img">'
			_html+='</div></a>'

			_html+='<h2>'+getlist[i].itemcon+'</h2>'
			_html+='<h3>'+getlist[i].businessname+'</h3>'
			_html+='<h4>'+getlist[i].votenum+'卡</h4>'
			_html+='<a href="#" class="btn_xz" id="'+getlist[i].id+'"><img src="img/btn_xz.png"></a>'
			_html+='	</li>'
		}

		$('.listbox2').html(_html)
	}
	else{
		alert('数据加载中')

	}
})
</script>
</html>